<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者日志 | 个人博客</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../public_static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="../public_static/bootstrap/bootstrap-icons.css">
    <!-- 鼠标点击文字显示效果css代码-->
    <link rel="stylesheet" href="../public_static/css/mouse_click_effect.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f8f9fa;
            color: #333;
            font-family: 'Inter', sans-serif;
        }
        
        .timeline-container {
            max-width: 800px;
        }
        
        /* 时间线样式 */
        .timeline {
            position: relative;
            padding-left: 2.5rem;
            margin-top: 2rem;
            margin-bottom: 3rem;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: #dee2e6;
            border-radius: 4px;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 2.5rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        
        .timeline-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .timeline-dot {
            position: absolute;
            left: calc(-3rem - 1px);
            top: 0;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            background-color: #fff;
            border: 4px solid #0d6efd;
            z-index: 1;
        }
        
        .timeline-content {
            background-color: #fff;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .timeline-date {
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .timeline-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: #212529;
        }
        
        .timeline-text {
            color: #495057;
            line-height: 1.6;
        }
        
        /* 响应式调整 */
        @media (max-width: 576px) {
            .timeline {
                padding-left: 2rem;
            }
            
            .timeline-dot {
                left: calc(-2rem + 4px);
                width: 1.25rem;
                height: 1.25rem;
            }
            
            .timeline-content {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header class="py-5 bg-white border-bottom">
        <div class="container text-center">
            <h1 class="display-5 fw-bold mb-2">开发者日志</h1>
            <p class="text-muted">记录博客开发的点点滴滴</p>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="py-8">
        <div class="container timeline-container mx-auto px-4">
            <!-- 时间线 -->
            <div class="timeline" id="timeline-container">
                <!-- 动态内容将在这里生成 -->
            </div>
        </div>
    </main>


    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="../public_static/bootstrap/bootstrap.bundle.min.js"></script>
    
    <script>
        // 从数据库加载
        document.addEventListener('DOMContentLoaded', function() {
            // 从数据库加载数据
            window.electronAPI.getTimelineEntries()
                .then(data => {
                    // 按日期排序（最新的在前）
                    const sortedData = data.sort((a, b) => {
                        // 将日期字符串转换为时间戳进行比较
                        return new Date(b.date) - new Date(a.date);
                    });
                    
                    // 生成时间线项目
                    const timelineContainer = document.getElementById('timeline-container');
                    
                    // 根据类型获取对应的图标和颜色
                    const getIconInfo = (type) => {
                        switch(type) {
                            case 'bug':
                                return { icon: 'bi-bug-fill', color: 'text-danger' };
                            case 'feature':
                                return { icon: 'bi-plus-circle-fill', color: 'text-success' };
                            case 'optimization':
                                return { icon: 'bi-arrow-up-circle-fill', color: 'text-primary' };
                            case 'release':
                                return { icon: 'bi-check-circle-fill', color: 'text-info' };
                            case 'deprecation':
                                return { icon: 'bi-x-circle-fill', color: 'text-warning' };
                            case 'test':
                                return { icon: 'bi-check2-square', color: 'text-secondary' };
                            case 'documentation':
                                return { icon: 'bi-file-text-fill', color: 'text-muted' };
                            case 'refactor':
                                return { icon: 'bi-code-slash', color: 'text-purple' };
                            default:
                                return { icon: 'bi-circle-fill', color: 'text-secondary' };
                        }
                    };
                    
                    // 遍历数据生成DOM元素
                    sortedData.forEach(item => {
                        const iconInfo = getIconInfo(item.type);
                        
                        const timelineItem = document.createElement('div');
                        timelineItem.className = 'timeline-item';
                        
                        // 格式化日期显示（YYYY年MM月DD日）
                        const date = new Date(item.date);
                        const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
                        
                        timelineItem.innerHTML = `
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-date">${formattedDate}</div>
                                <h3 class="timeline-title">
                                    <i class="bi ${iconInfo.icon} ${iconInfo.color} me-2"></i>${item.title}
                                </h3>
                                <p class="timeline-text">${item.content || ''}</p>
                            </div>
                        `;
                        
                        timelineContainer.appendChild(timelineItem);
                    });
                    
                    
                    // 初始化动画检查
                    showVisibleItems();
                    // 滚动时检查
                    window.addEventListener('scroll', showVisibleItems);
                })
                .catch(error => {
                    console.error('加载时间线数据时出错:', error);
                    const timelineContainer = document.getElementById('timeline-container');
                    timelineContainer.innerHTML = '<p class="text-danger">无法加载日志数据，请稍后再试</p>';
                });
            
            function isInViewport(element) {
                const rect = element.getBoundingClientRect();
                return (
                    rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.8
                );
            }
            
            function showVisibleItems() {
                const timelineItems = document.querySelectorAll('.timeline-item');
                timelineItems.forEach(item => {
                    if (isInViewport(item)) {
                        item.classList.add('visible');
                    }
                });
            }
        });
    </script>
</body>
</html>
